<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 600px;
            height: 400px;
            margin: 100px auto;
            border: 10px solid black;
            position: relative;
            overflow: hidden;
        }
        .box .op{
            width: 300%;
            display: flex;
            position: absolute;
            left: 0;
            top: 0;
        }
        .box .op img{
            width: 600px;
            height: 400px;
        }
        .box .lr{
            position: absolute;
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 15%;
            left: 0;
            top: 50%;
            transform: translateY(-50%);

        }
        .box .lr p{
            background-color: rgba(0,0,0,0.8);
            font-size: 30px;
            height: 100%;
            width: 10%;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box .span1{
            position: absolute;
            bottom: 0;
            left: 50%;
            height: 10%;
            transform: translateX(-50%);
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
           
            border-radius: 12px;
        }
        .box .span1 span{
            background-color: gray;
            opacity: 0.7;
            border-radius: 50%;
            width: 5%;
            height:60%;
            margin-left: 10px;

        }
        .box .span1 .active{
            background-color: orange;
        }
        .tran{
            transition: left 0.6s linear;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="op">
            <img src="../轮播图/w1.webp" alt="">
            <img src="../轮播图/w4.webp" alt="">
            <img src="../轮播图/w5.webp" alt="">
        </div>
        <div class="lr">
            <p class="left"><</p>
            <p class="right">></p>
        </div>
        <div class="span1">
           
        </div>
    </div>
    <script>
        //获取元素
        var box = document.querySelector(".box")
        var op = box.querySelector(".op")
        var img_list = op.querySelectorAll("img")
        var lr = box.querySelector(".lr")
        var lr_left = lr.querySelector(".left")
        var lr_right = lr.querySelector(".right")
        var span1 = box.querySelector(".span1")
        var span1_list = span1.querySelectorAll("span")
        //初始索引
        var index = 1;
        //初始化位置
        op.style.left = -index*box.clientWidth+"px"
        //书写左右运动的位置改变函数//移动总图片栏
        function left_right(n){
            //需要设置初始索引index=0
            //当跳转到左右末尾时进行跳转


            //添加类名，添加动画效果，实现动态滚动
            op.classList.add("tran")
            if(index<0){
                index=op.children.length-2
            }
            
            
            //根据索引，以视口为单位进行移动
            op.style.left = -index*box.clientWidth +"px"
            //在动画结束时做点事情,运动结束时才判断
            setTimeout(() => {
            //改变节流值，开关打开
            set = true
            //为焦点添加选中效果
            addpointer()
            //判断当前index的值
            if(index>=op.children.length-1){
                
                index=1
                //移出类名，取消动画效果，实现静态跳转
                op.classList.remove("tran")
                //在动画时间结束时才跳转
                op.style.left = -index*box.clientWidth +"px"
            }
            if(index==0){
                index = op.children.length-2
                op.classList.remove("tran")
                op.style.left = -index*box.clientWidth+"px"
            }
            
            }, 600);
        }
        //绑定事件
        //设置节流
        var set = true;
        lr_left.onclick = ()=>{
            if(set){
                set = false
                left_right(index--)
            }
           
        }
        lr_right.onclick = ()=>{
            if(set){
                set = false
                left_right(index++)
            }
        }
        //设置自动轮播
        //设置定时器id接收变量
        var timer = 0
        function auto_move(){
            timer = setInterval(()=>{
                left_right(index++)
            },2000)
        }
        auto_move()
        //设置开关，鼠标移进就停，移出就开,使用mouseenter和mouseleave避免冒泡
        box.onmouseenter = ()=>{
            clearInterval(timer)
        }
        box.onmouseleave = ()=>{
            auto_move()
        }
        //克隆节点以便日后更改
        function clone(){
            //克隆节点
            let first = op.firstElementChild.cloneNode(true)
            let last = op.lastElementChild.cloneNode(true)
            //插入节点
            op.appendChild(first)
            op.insertBefore(last,op.children[0])
            //改变总栏宽度
            op.style.width = op.children.length*box.clientWidth+"px"
        }
        clone()
       //根据图片多少生成焦点
       function pointer(){
       
        for(let i=0;i<img_list.length;i++){
            let span = document.createElement("span")
            span1.appendChild(span)
        }
        span1.children[0].classList.add("active")
       }
       pointer()
       //根据index为焦点添加选中效果
       function addpointer(){
        //初始化焦点，清除所有点击效果
        for(let j=0;j<span1.children.length;j++){
            span1.children[j].classList.remove("active");
        }
        if(index==4){
            span1.children[0].classList.add("active")
        }
        else if(index==0){
            span1.children[span1.children.length-1].classList.add("active")
        }
        else{
            span1.children[index-1].classList.add("active")
        }
        
       }
       //为焦点设置点击事件
       span1.querySelectorAll("span").forEach((item,inx)=>{
        item.onclick = ()=>{
            index=inx+1
            left_right(index)
            addpointer()
        }
       })

       //无退出浏览器的鬼畜问题
    </script>
</body>
</html>